JavaScript — Null vs. Undefined

文章目录

1. 1. null是啥？
2. 2. undefined是啥？
3. 3. null & undefined的相同点
4. 4. 🙌null和undefined存在差异的实际应用场景🙌
5. 5. 总结

null是啥？

关于null有两点需要掌握：

null是一个空值
null是被赋值来的
下面是个 Demo, 我们给 a 变量赋值为 null:

let a = null;
console.log(a);
// null

undefined是啥？

undefined通常表示一个变量单单被声明过，但是没有初始化。Demo:

let b;
console.log(b);
// undefined

你也可以特意的给一个变量赋值为undefined，不过正常场景下不会这么使用。

let c = undefined;
console.log(c);
// undefined

还有一点，当访问对象不存在的属性时，我们会得到undefined

var d = {};
console.log(d.fake);
// undefined

null & undefined的相同点

在 JS 语言中，有6个falsy的值，其中null和undefined是六个falsy值中的两个。

falsy 值：

false
0 (zero)
“” (empty string)
null
undefined
NaN (Not A Number)

其余所有的值则皆为truthy。

另外， JS 语言中有六个原始数据类型，null和undefined是其中两个原始类型的值。原始数据类型：

Boolean
Null
Undefined
Number
String
Symbol

不在上述六种之内的就都是引用类型。但是有趣的是，当你使用typeof来校验 null时，返回的却是object，可以简单理解为这是js 在最初引入的一个 bug。

let a = null;
let b;
console.log(typeof a);
// object
console.log(typeof b);
// undefined
null !== undefined

通过上面的介绍，你可能已经隐隐约约的感觉到了null和undefined是不同的，但非常相似。所以，null !== undefined,null == undefined。

🙌null和undefined存在差异的实际应用场景🙌

废话那么多，真正能用的地方，就越到一个，es6的默认参数。

let logHi = (str = 'hi') => {
  console.log(str);
}
/*默认值生效*/
logHi();
// hi

/*正常调用*/
logHi('bye');
// bye

/*默认值生效*/
logHi(undefined);
// hi

/*null 被当成有效的值*/
logHi(null);
// null

就上述代码，大家在和我一同回忆下 es5的默认参数的写法

let logHi = (str) => {
  str = str || 'hi';
  console.log(str);
}

logHi('bye');
// bye

logHi()
// hi
logHi(undefined);
// hi
logHi(null);
// hi

总结

null是被赋值出来的，它用来表示空
undefined通常表示一个变量被声明了，但是没有被初始化
null和undefined都是falsy值
null和undefined都是原始数据类型，但JS 语言的bug导致
typeof null = object
null !== undefined
null == undefined